<template>
  <div>
    <el-row class="padding-sm items-cente flex">
      <el-col :span="22" style="margin: 0 auto; padding-top: 10px">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>店铺信息</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
      <el-col :span="2" style="margin: 0 auto">
        <el-button type="primary" size="small" round plain>
          修改
        </el-button></el-col
      >
    </el-row>
    <el-main>
      <el-row>
        <el-col :span="8">
          店铺名称：<el-input
            style="width: 250px"
            placeholder="请输入内容"
            v-model="username"
            clearable
          >
          </el-input>
        </el-col>
        <el-col :span="8">
          店铺地址：<el-cascader
            style="width: 250px"
            :options="citys"
            :props="citysList"
            clearable
            @change="city"
          >
          </el-cascader>
        </el-col>
        <el-col :span="12" class="flex items-center margin-top-xs">
          店铺头像：
          <el-upload
            :action="action"
            accept=".jpg,.png,.webp,.jfif"
            name="file"
            list-type="picture-card"
            :on-success="sussesimg"
            :on-remove="remoimg"
            :file-list="dialogImageUrl"
            :limit="1"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-col>
        <el-col :span="20" style="margin: 20px 0 0 80px">
          <el-button type="primary" @click="upsppings">提交</el-button>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import increase from "@/utils/increase";
import citys from "@/assets/json/citys.json";
export default {
  data() {
    return {
      action: "http://localhost:3301/api/after/sopload",
      dialogImageUrl: [],
      dialogVisible: false,
      citys: citys.citylist,
      citysList: {
        value: "label",
        label: "label",
        children: "children",
      },
      username: "",
      address: "",
    };
  },
  methods: {
    city(e) {
      this.address = e[0] + "-" + e[1] + "-" + e[2];
    },
    // 图片上传成功
    sussesimg(res, file) {
      this.dialogImageUrl.push({ uid: file.uid, url: res.data });
    },
    // 移除照片
    remoimg(file, fileList) {
      this.ListData.dialogImageUrl = [];
    },
    /* 提交商家信息 */
    upsppings() {
      let image = JSON.stringify(this.dialogImageUrl);
      let data = { username: this.username, address: this.address, image };
      increase
        .upspping({ data })
        .then((data) => {
          this.$message.success(data.data.msg);
          console.log("成功返回的数据:", data);
        })
        .catch((error) => {
          this.$message.error(error);
          console.log("返回错误:", error);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>